<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Amazon DVD Search Web Service Interface</title>

<style type="text/css">
/* margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments.  */
body {
    margin: 0;
    padding: 0;
}

/* But we like pretty look web pages, so we add a little
margin to our content anyway. :) */
#mainContent {
    padding: 1em 2em;
    width: 50%;
}

a.expandContract:link, a.expandContract:visited {
    color: blue;
}

a.expandContract:hover {
    color: #990000;
}

#resultsHere a:hover {
    color: #660000;
}

div.show {
    display: inline;
}

div.hide {
    display: none;
}
</style>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/assets/skins/sam/logger.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/assets/skins/sam/button.css" />

<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/event/event-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/logger/logger-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/button/button-min.js"></script>

<script type="text/javascript">
  // The Yahoo logger utility is a pretty useful cool tool
  // as it enables easy logging from inside your custom methods.

  //create log reader instance on pageload
  function loggerInit() {
      var myLogReader = new YAHOO.widget.LogReader();
  }
  YAHOO.util.Event.on(window, "load", loggerInit);
  YAHOO.log("Foo: logger initialized");

  // OTOH, the Yahoo toolkit's Event handler utilities trap errors in
  // event handlers (through a try/catch), which means they silently die.
  // That's not really helpful when you want to debug, so we tell it to
  // behave properly for our testing purposes:
  YAHOO.util.Event.throwErrors = true;

  YAHOO.util.Event.onDOMReady(function() {
      var buttonQuery = new YAHOO.widget.Button("queryButton");
  });

  function fillInResult(results) {
      var html = "<br>";
      if(results.length==0) {
          html = "There were no results found.";
      }
      else {
          for(i=0; i<results.length; i++) {
              html += results[i].getHTML(i);
              html += "<br>";
          }
      }
      document.getElementById("resultsHere").innerHTML = html;
  }

  function parseAmazonResults(title, callback) {
      function successHandler(o) {
          YAHOO.log("Our Amazon request succeeded!");

          var resultArray = new Array();
          var root = o.responseXML.documentElement;
          var titles = root.getElementsByTagName('Item');

          for(i=0; i<titles.length; i++){
              var url = titles[i].getElementsByTagName('DetailPageURL')[0].firstChild.nodeValue;
              var title = titles[i].getElementsByTagName('Title')[0].firstChild.nodeValue;
              var actors = titles[i].getElementsByTagName('Actor');

              var result = new ResultData(title, url);
              for(j=0; j<actors.length; j++){
                  result.addActor(actors[j].firstChild.nodeValue);
              }

              YAHOO.log("Result "+i+" "+result.toString());
              resultArray.push(result);
          }
          callback(resultArray);
      }

      function failureHandler(o) {
          YAHOO.log("Amazon request failed with HTTP status code " + o.status);
      }

      // A variable for the AWS account on which the requests will be made.
      // Your AWS ID as a string.
      var awsID = '1EMG6J1BK77DK46SF3G2';
      // The URL for the asynchronous request, make sure this points to
      // your own web proxy!
      var sUrl = 'proxy.cgi?Service=AWSECommerceService&AWSAccessKeyId=' +
                  awsID + '&Operation=ItemSearch&SearchIndex=DVD&Title=' + title;

      YAHOO.log("Submitting request " + sUrl, "info", "example");

      var request = YAHOO.util.Connect.asyncRequest('GET', sUrl,
           {success:successHandler, failure:failureHandler});
  }

  function runSearch(termField) {
      parseAmazonResults(escape(document.getElementById(termField).value), fillInResult);
  }

  // Create a new Object Type for the Result Data from one Amazon movie result.
  function ResultData(in_title, in_url) {
      this.title = in_title;
      this.url = in_url;
      this.actors = new Array();
      this.addActor = function(actor) {
          this.actors.push(actor);
      };
      this.toString = function() {
          var retval = "Title:" +  this.title;
          for (var i = 0; i < this.actors.length; i++) {
              retval += "Actor:" + this.actors[i];
          }
          return retval;
      };
      this.getHTML = function(num) {
      var html = "<a href=\""+this.url+"\">"+this.title+"</a> &nbsp;&nbsp;&nbsp; <a class=\"expandContract\" id=\"expand"+num+"\" href=\"#\" onclick=\"expand("+num+")\">[Expand]</a><br>";
      html += "<div class=\"hide\" id=\"actor"+num+"\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Actors: ";
      for(var i=0; i<this.actors.length-1; i++) {
          html += this.actors[i]+", ";
      }
      html += this.actors[i];
      html+= "<br></div>";

      return html;
      };
  }

  function expand(num){
      var element = document.getElementById("actor"+num);
      if(YAHOO.util.Dom.hasClass(element, "hide")){
          YAHOO.util.Dom.replaceClass(element, "hide", "show");
          document.getElementById("expand"+num).innerHTML = "[Collapse]";
      }
      else{
          YAHOO.util.Dom.replaceClass(element, "show", "hide");
          document.getElementById("expand"+num).innerHTML = "[Expand]";
      }
  }

</script>
</head>

<body class="yui-skin-sam">
<div id="mainContent">
  <h1>Amazon DVD Search Web Service</h1>

  <div class="exampleIntro">
    <p>This example demonstrates how to use the <a href="http://developer.yahoo.com/yui/connection/">Connection Manager</a> and a proxy &mdash; to work around XMLHttpRequest's same-domain policy &mdash; to retrieve an XML document from an Amazon Web Service</p>
  </div>

  <form id="queryForm" onsubmit="runSearch('searchTerms'); return false;">
    <input type="text" id="searchTerms" />
    <input type="submit" id="queryButton" value="Query" />
  </form>
  <div id="resultsHere"></div>

</div>
</body>
</html>
